<template>
  <div class="box">
    <van-nav-bar title="账户余额" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
      <van-cell title="余额" :value="zprice" />
      <van-cell title="充值" is-link @click="Recharge" />
      <van-cell title="提现" is-link @click="reflect" />
      <van-cell title="交易记录" is-link to="/record" />
    </div>
  </div>
  <van-popup v-model:show="show" closeable position="bottom" :style="{ height: '80%' }">
    <div style="padding: 1rem">
      <div>
        <van-sidebar v-model="active" style="width: 100%; height: 100%">
          <van-sidebar-item
            v-for="(item, index) in ka"
            :key="index"
            :title="item"
            @click="sideber(item)"
          />
        </van-sidebar>
      </div>
      <div class="input">
        <input type="text" placeholder="请输入金额" v-model="price" />
      </div>
      <div class="btn">
        <button @click="btnpay">{{ Reisflect }}</button>
      </div>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { showSuccessToast, showFailToast, showLoadingToast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
const onClickLeft = () => history.back()
const ka = ref(['邮政银行', '农业银行', '工商银行'])
const active = ref(0)
const zprice = ref(localStorage.getItem('zprice') || 0)
const show = ref(false)
const Reisflect = ref('')
const price = ref('')
const route = useRoute()
const bank = ref('')
const record = ref(localStorage.getItem('record') ? JSON.parse(localStorage.getItem('record')) : [])
// console.log(route.query.total_amount)

// 充值
const Recharge = () => {
  show.value = true
  Reisflect.value = '充值'
}
// 提现
const reflect = () => {
  show.value = true
  Reisflect.value = '提现'
}
// 银行
const sideber = (item) => {
  bank.value = item
}
const btnpay = async () => {
  if (bank.value == '') {
    show.value = false
    showFailToast('请选择银行')
    return
  }
  if (price.value == '') {
    show.value = false
    showFailToast('请输入金额')
    return
  }
  if (Reisflect.value == '充值') {
    const orderId = Date.now().toString()
    const returl = 'http://localhost:5173/finish'
    var res = await axios.get('/app/createOrder', {
      params: {
        id: orderId,
        title: '药房',
        desc: '购买药品',
        zprice: price.value,
        returl: returl,
      },
    })
    // window.location.href = res.data.result;
    if (bank.value != '') {
      const url = res.data.result
      const parsedUrl = new URL(url)
      const params = new URLSearchParams(parsedUrl.search)
      const bizContent = JSON.parse(params.get('biz_content'))
      const outTradeNo = bizContent.total_amount
      console.log(outTradeNo)
      var data = {
        price: '+' + outTradeNo,
        time: new Date().toLocaleString(),
        title: '充值',
        name: bank.value,
      }
      record.value.unshift(data)
      localStorage.setItem('record', JSON.stringify(record.value))
      window.location.href = res.data.result
    }
  }
  if (Reisflect.value == '提现') {
    var pr1 = parseFloat(price.value)
    var pr2 = parseFloat(zprice.value)
    if (pr1.value > pr2.value) {
      show.value = false
      showFailToast('余额不足')
      return
    }
    showLoadingToast({
      message: '提现中...',
      forbidClick: true,
      loadingType: 'spinner',
    })
    setTimeout(() => {
      show.value = false
      showSuccessToast('提现成功')
      zprice.value = (pr2 - pr1).toFixed(2)
      var data = {
        price: '-' + price.value,
        time: new Date().toLocaleString(),
        title: '提现',
        name: bank.value,
      }
      record.value.unshift(data)
      localStorage.setItem('record', JSON.stringify(record.value))
      localStorage.setItem('zprice', zprice.value)
    }, 3000)
  }

}
onMounted(() => {
  if (route.query.total_amount) {
    var pr1 = parseFloat(route.query.total_amount)
    var pr2 = parseFloat(zprice.value)
    zprice.value = (pr1 + pr2).toFixed(2)
  }
  localStorage.setItem('zprice', zprice.value)
})
</script>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
}
.input {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
  input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
    padding-left: 1rem;
    color: red;
  }
}
.btn {
  width: 100%;
  height: 2.5rem;
  margin-top: 3rem;
  button {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
    background-color: #1989fa;
    color: #fff;
    font-size: 0.8rem;
  }
}
</style>
